<template>
        <div class="top">
            <div class="logo"><router-link to="/front-index"><img src="../../assets/images/logo.png" /></router-link></div>
            <div class="search">
                <form>
                    <input type="text"  v-model="searchName" class="s_ipt" />
                    <input type="submit" value="搜索" @click.prevent="search" class="s_btn" />
                </form>                      
            </div>
            <div class="i_car">
                <div class="car_t">购物车  <span v-if="loginStatus">[{{ cartList.length }}]</span> </div>
                <div class="car_bg">               
                    <template v-if="!loginStatus">
                        <!--Begin 购物车未登录 Begin-->
                        <div class="un_login">还未登录！<router-link style="color:#ff4e00;" to="/login">马上登录</router-link> 查看购物车！</div>
                        <div style="cursor: pointer;" class="price_a" @click="login">登录</div>
                    </template>
                    <!-- 购物车内容 -->
                    <template v-if="loginStatus">
                        <ul class="cars">
                            <li v-for="item in cartList" :key="item.id">
                                <div class="img"><a href="#"><img :src="'http://192.168.79.98:9001/'+item.fileName" width="58" height="58" /></a></div>
                                <div class="name"><a>{{ item.name }}</a></div>

                                <div class="price"><font color="#ff4e00">￥{{ countNumber(item.price,"*",item.count) }}</font> X{{ item.count }}</div>
                            </li>
                        </ul> 
                        <template v-if="cartList.length > 0">
                            <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>{{ totalPrice }}</span></div>
                            <div class="price_a"><router-link to="/cart-one">去购物车结算</router-link></div>
                        </template>
                        <template v-if="cartList.length == 0">
                            <div class="price_sum">空空如也</div>
                            <div class="price_a"><router-link to="/goodslist">去购物</router-link></div> 
                        </template>
                    </template>




                    <!--End 购物车已登录 End-->
                </div>
            </div>
        </div>
</template>

<script>
import computeNumber from '@/assets/js/computeNumber';
export default {
    name:'Heard',
    mounted(){
        
    },
    computed:{
        cartList(){
            return this.$store.state.cartList;
        },
        loginStatus(){
            return this.$store.state.loginStatus;
        },
        totalPrice(){
            return this.cartList.reduce((sum,item)=>{
                let count = item.count;
                let price = item.price;
                if (!isNaN(price) && !isNaN(count)) {
                    return computeNumber(sum, '+', computeNumber(price, '*', count).result).result;
                }
                return sum;
            },0);
        },
        cartList(){
            return this.$store.state.cartList;
        }
    },
    data:function(){
        return{
            categoryList:[],
            searchName:this.$route.params.searchName || '',
            products:[],
        }
    },
    methods:{

        //解决精度问题，计算价格
        countNumber(num1,type,num2){
           return computeNumber(num1,type,num2).result;
        },
        //点击登录按钮
        login(){
            this.$router.push({name:'Login'});
        },
        search(){
            this.getProductFromEs(1,2,this.searchName);
            this.$store.commit('changeSearchName',this.searchName);
        },
        //从es中获取数据
        getProductFromEs(pageNum,pageSize,searchName){
            this.$axios({
                url:'/easybuy/products/index',
                params:{
                    pageNum,
                    pageSize,
                    searchName
                }
            }).then(rs=>{
                console.log("要发送的list",rs.data.pageInfo.list);
                this.products = rs.data.pageInfo.list;
                console.log('点击head查出来的数据:',this.products);
                //将数据放到vuex中
                this.$store.commit('changeProducts',this.products);
                this.$store.commit('changePageInfo',rs.data.pageInfo);
                if(this.$route.name!="GoodsList"){
                    this.$router.push({name:'GoodsList'});
                }
                //清除vuex中的categoryId
                this.$store.commit('changeCategoryId','');
            })
        }
    },


}
</script>

<style>

</style>